import React, { useEffect,useState } from 'react'
import { Form, Input, Button, DatePicker, Col, Row ,Breadcrumb} from 'antd';
import { Table,Modal } from 'antd';
import axios from 'axios';
import { useForm } from 'antd/lib/form/Form';

export default function Table1() {
    const [dataBase, setDataBase] = useState([])
    const [total, setTotal] = useState("0")
    const paginationProps = {
        // onChange: (page) => {
        //     getData(page)
        // },
        pageSize: 10,
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const handleCancel = () => {
        setIsModalVisible1(false);
    };
        //行内数据
        const columns = [
            {
                title: "姓名",
                dataIndex: "xingMing",
                key: "xingMing",
                align: 'center',
            },
            {
                title: "处方张数",
                dataIndex: "zhangShu",
                key: "zhangShu",
                align: 'center',
            },
            {
                title: "笔数",
                dataIndex: "biShu",
                key: "biShu",
                align: 'center',
            }, {
                title: "总金额",
                dataIndex: "zongJinE",
                key: "zongJinE",
                align: 'center',
            }, 
            {
                title: "现金数",
                dataIndex: "xianJinShu",
                key: "xianJinShu",
                align: 'center',
            }, 
            {
                title: "代扣金额数",
                dataIndex: "daiKouJinEShu",
                key: "daiKouJinEShu",
                align: 'center',
            }, 
            {
                title: "日期",
                dataIndex: "riqi",
                key: "riqi",
                align: 'center',
            },
            {
                title: "操作",
                dataIndex: 'operation',
                key: 'operation',
                ellipsis: true,
                align: 'center',
                width: "300px",
                render: (text, row) => {
                    return (
                        <>

                            <Button onClick={() => { chaKan(row) }} style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查看</Button>
                        </>
                    )
                }
            }
        ]
        const getData=()=>{
            axios("/chuFangRiJi/tongJi", {
                method: "post",
                headers: { "Content-Type": "application/json" },
            })
                .then(res => {
                    console.log(res);
                    if(res.data.code===200){
                        let data=res.data.data
                        for(let i=0;i<data.length;i++){
                            data[i].key=i+1
                            data[i].xianJinShu="XXX"
                            data[i].daiKouJinEShu="XXX"
                        }
                        setDataBase(data)
                    }
                    
                    
                })
                .catch(err => {
                    console.log(err);
                })
        }
        useEffect(()=>{
            getData()
        },[])
        //打印按钮
        const [form]=useForm()
        const chaKan = (row) => {
            console.log(row);
        setIsModalVisible1(true);
            form.setFieldsValue(row)
        }
        const chaXun=(value)=>{
            console.log(value);
            let temp={}
            temp.xingMing=value.xingMing
            if(value.riQi===undefined){
                temp.jiJiaRiQi=undefined
           }else{
            temp.jiJiaRiQi=value.riQi.format('YYYY-MM-DD')
           }
            axios("/chuFangRiJi/tongJi",{
                method:"post",
                headers:{ "Content-Type": "application/json" },
                params:temp
            })
            .then(res=>{
                console.log(res);
                let data=res.data.data
                let tempArr=[]
                if(res.data.code===200){
                    for(let i=0;i<data.length;i++){
                        let temp={}
                        temp.xingMing=data[i].xingMing
                        temp.zhangShu=data[i].zhangShu
                        temp.biShu=data[i].biShu
                        temp.zongJinE=data[i].zongJinE
                        temp.xianJinShu="XXX"
                        temp.daiKouJinEShu="XXX"
                        temp.riqi=data[i].riqi.split(" ")[0]
                        temp.key=i+1
                        tempArr.push(temp)
                    }
                    setDataBase(tempArr)
                 setTotal(res.data.count)
                }
            })
            .catch(err=>{
                console.log(err);
            })
        }
    const riQi=()=>{}
    return (
        <div>
             {/* table表格 */}
             <Breadcrumb style={{marginBottom: 24}}>
                <Breadcrumb.Item>计价收费</Breadcrumb.Item>
                <Breadcrumb.Item>处方统计表</Breadcrumb.Item>
            </Breadcrumb>
            <Col span={24} className="contentBody-col">
                <Form layout='inline' onFinish={chaXun}>
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="日期" name="riQi">
                        <DatePicker onChange={riQi} placeholder="请选择日期" />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit"  style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查询</Button>
                    </Form.Item>
                </Form>
            </Col>
             <Col span={24} className="contentBody-col">
                <Table pagination={paginationProps} collapsible="true" dataSource={dataBase} columns={columns} childrenColumnName></Table>
            </Col>
            <Modal okText  cancelText="关闭" title="计价收费修改"   visible={isModalVisible1} onCancel={handleCancel}  >
                <Form   layout="vertical" form={form}>
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input readOnly placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="处方张数" name="zhangShu">
                        <Input readOnly  />
                    </Form.Item>
                    <Form.Item label="笔数" name="biShu">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="总金额" name="zongJinE">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="现金数" name="xianJinShu">
                        <Input readOnly />
                    </Form.Item>
                    <Form.Item label="代扣金额数" name="daiKouJinEShu">
                        <Input readOnly/>
                    </Form.Item>
                    <Form.Item label="日期" name="riqi">
                        <Input readOnly/>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
